<template>
  <div class="left_floot">
    <ul>
      <li>{{ proName1 }}</li>
      <li>{{ proName2 }}</li>
      <li>{{ proName3 }}</li>
      <li>{{ userName }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState({
      proName1: (state) => state['sfsHome']['sfsProName'],
      proName2: (state) => state['sfsOnemap']['sfsProName'],
      proName3: (state) => state['projectA']['home']['proName'],
      userName: (state) => state['projectA']['onemap']['userName'],
    }),
  },
}
</script>

<style lang="less" scoped>
.left_floot {
  padding: 10px 0;
  width: 100%;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  background-color: rgb(27, 18, 5);
}
</style>
